<!-- 添加客户 页面 -->
<template>
	<view class="customer-container-box">
		<view class="cus-item-box">
			<view class="item-left">客户姓名:</view>
			<u-input v-model="addCusFormData.name" placeholder="请输入姓名" :custom-style="inputStyle" :clearable="false" type="text" />
		</view>
		<view class="cus-item-box" @click="cusTypeShow = true">
			<view class="item-left">客户性质:</view>
			<view :style="{ color: cusTypeColor }">{{ addCusFormData.cus_type }}</view>
			<u-select v-model="cusTypeShow" :list="cusTypeList" @confirm="cusTypeClick"></u-select>
		</view>
		<view class="cus-item-box">
			<view class="item-left">客户地址:</view>
			<u-input v-model="addCusFormData.adress" placeholder="请输入地址" :custom-style="inputStyle" :clearable="false" type="text" />
		</view>
		<view class="cus-item-box">
			<view class="item-left">客户电话:</view>
			<u-input v-model="addCusFormData.phone" placeholder="请输入电话" :custom-style="inputStyle" :clearable="false" type="number" />
		</view>
		<view class="cus-item-box" @click="caseTypeShow = true">
			<view class="item-left">案件类型:</view>
			<view :style="{ color: caseTypeColor }">{{ addCusFormData.case_type }}</view>
			<u-select v-model="caseTypeShow" :list="caseTypeList" @confirm="caseTypeClick"></u-select>
		</view>

		<!-- 底部按钮 -->
		<bottom-btn text="确认添加" @click="addCusBtnClick"></bottom-btn>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 添加客户表单数据对象
			addCusFormData: {
				name: '',
				// 客户类型
				cus_type: '个人/企业',
				cus_type_value: '', // 客户性质的 value
				adress: '',
				phone: '',
				case_type: '请选择案件类型',
				case_type_value: ''
			},
			// 输入框的样式
			inputStyle: {
				width: '500rpx',
				height: '94rpx',
				fontSize: '30rpx',
				fontsWeight: 500,
				fontFamily: 'PingFang SC'
			},
			cusTypeShow: false,
			cusTypeColor: '#97979F',
			caseTypeColor: '#97979F',
			caseTypeShow: false,
			caseTypeList: [], // 案件类型列表
			// 客户性质数据列表
			cusTypeList: [
				{
					value: 1,
					label: '个人'
				},
				{
					value: 2,
					label: '企业'
				}
			]
		};
	},
	onLoad() {
		this.getcaseTypeList();
	},
	methods: {
		// 获取案件类型
		async getcaseTypeList() {
			const res = await this.$u.api.getcaseTypeList();
			if (!res) return;
			for (let k in res) {
				let item = {
					value: res[k].id,
					label: res[k].name
				};
				this.caseTypeList.push(item);
			}
			console.log(this.caseTypeList);
		},
		// 选择客户性质时的确认事件
		cusTypeClick(arr) {
			this.cusTypeColor = '#141418';
			this.addCusFormData.cus_type = arr[0].label;
			this.addCusFormData.cus_type_value = arr[0].value;
		},
		// 选择案件类型
		caseTypeClick(arr) {
			(this.caseTypeColor = '#141418'), (this.addCusFormData.case_type = arr[0].label), (this.addCusFormData.case_type_value = arr[0].value);
		},
		// 确认添加 按钮的点击事件
		async addCusBtnClick() {
			// 手动进行表单校验(此处不校验手机号，手机号单独处理)
			if (
				!this.addCusFormData.name ||
				!this.addCusFormData.cus_type_value ||
				!this.addCusFormData.adress ||
				!this.addCusFormData.case_type_value ||
				!this.addCusFormData.phone
			)
				return this.$u.toast('请完善客户信息');
			if (!this.$u.utils.isPhone(this.addCusFormData.phone)) return this.$u.toast('手机号格式错误');
			// TODO:处理后续的添加客户业务逻辑
			let params = {
				lawyer_type: this.addCusFormData.case_type_value,
				name: this.addCusFormData.name,
				identity: this.addCusFormData.cus_type == '个人' ? 1 : 2,
				address: this.addCusFormData.adress,
				mobile: this.addCusFormData.phone
			};
			const res = await this.$u.api.addCustomer(params);
			if (!res) return;

			// 最后添加成功则跳转到客户管理页面(该页面也应该能展示出此条数据)
			this.$u.route({
				type: 'back'
			});
			this.$u.vuex('vuex_isSubmit', true);
			this.$u.toast('添加客户成功');
		}
	}
};
</script>

<style lang="scss" scoped>
.customer-container-box {
	width: 750rpx;
	min-height: 100vh;
	background-color: $u-bg-color;
	padding-top: 20rpx;
	padding-bottom: 90rpx;
	.cus-item-box {
		height: 94rpx;
		line-height: 94rpx;
		background-color: white;
		display: flex;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		padding: 0 24rpx;
		border-bottom: 1px solid $u-bg-color;
		color: #97979f;
		.item-left {
			margin-right: 2em;
			color: #141418;
		}
	}
}
</style>
